<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="" name="keywords">
    <meta content="" name="description">
    <title th:text="修改文章"></title>
    <link rel="stylesheet" th:href="@{/lib/editormd/css/editormd.min.css}">
    <link rel="stylesheet" th:href="@{/component/pear/css/pear.css}">
    <link rel="stylesheet" th:href="@{/admin/css/other/user.css}"/>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <style>
        .layui-upload-img {
            width: 350px;
            height: 200px;
            border-radius: 5px;
            border: 2px dashed #00b7ee;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .layui-upload-img img {
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form action="" class="layui-form" lay-filter="user-query-form">
            <div class="layui-form-item">
                <label class="layui-form-label">分类</label>
                <div class="layui-input-inline">
                    <select name="typeId" lay-verify="required">
                        <option value="">请选择文章类别</option>
                        <option th:each="type:${allTypes}" th:text="${type.getName()}"
                                th:value="${type.getId()}" th:selected="${type.getId()==blog.typeId.getId()}"></option>
                    </select>
                </div>
                <label class="layui-form-label">文章类型</label>
                <div class="layui-input-inline">
                    <select name="flag" lay-verify="required">
                        <option value="">请选择文章类型</option>
                        <option value="原创" th:selected="${blog.flag=='原创'}">原创</option>
                        <option value="转载" th:selected="${blog.flag=='转载'}">转载</option>
                    </select>
                </div>
                <input class="layui-hide" name="id" th:value="${blog.id}">
                <input type="checkbox" name="recommend" value="true" th:checked="${blog.recommend}"
                       title="&nbsp;&nbsp;推荐" lay-skin="primary">
                <input type="checkbox" name="appreciation" value="true" th:checked="${blog.appreciation}"
                       title="&nbsp;&nbsp;赞赏" checked
                       lay-skin="primary">
                <input type="checkbox" name="commentabled" value="true" th:checked="${blog.commentabled}"
                       title="&nbsp;&nbsp;评论" checked
                       lay-skin="primary">
                <span style="margin-left: 17%">
                    <button class="pear-btn pear-btn-md " id="save" lay-submit lay-filter="saveArticle">
                    <i class="layui-icon layui-icon-note"></i>
                    保存
                </button>
                <button class="pear-btn pear-btn-md pear-btn-primary" id="send" lay-submit lay-filter="postArticle">
                    <i class="layui-icon layui-icon-release"></i>
                    更新
                </button>
                </span>
                <div style="padding-top: 15px;">
                    <label class="layui-form-label">文章标题</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" lay-verify="required" th:value="${blog.title}" name="title"
                               placeholder="请输入标题">
                    </div>
                </div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">封面图地址</label>
                <div class="layui-input-inline">
                    <input class="layui-input" th:value="${blog.firstPicture}" name="firstPicture" lay-verify="firstPic"
                           id="firstPicInput" type="text"
                           disabled>
                </div>
                <div class="layui-btn layui-btn-normal" id="uploadFirstPic">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <div class="layui-upload" style="float: left">
                        <div class="layui-upload-list">
                            <div class="layui-upload-img">
                                <span id="uploadTips"></span>
                                <img id="firstPic" th:src="@{/file/getImg/}+${blog.firstPicture}">
                            </div>
                        </div>
                        <div style="width: 300px;">
                            <div class="layui-progress" style="margin-top: 15px" lay-showPercent="yes">
                                <div class="layui-progress-bar layui-bg-blue" id="uploadImgProg"
                                     lay-percent="0%"></div>
                            </div>
                        </div>
                    </div>
                </label>
            </div>
            <div id="editor">
                <!-- Tips: Editor.md can auto append a `<textarea>` tag -->
                <textarea name="content" style="display:none;" th:text="${blog.content}"></textarea>
            </div>
        </form>
    </div>
</div>

<script th:src="@{/js/jquery/jquery.min.js}"></script>
<script th:src="@{/lib/editormd/editormd.min.js}"></script>
<script th:src="@{/component/layui/layui.js}"></script>
<script type="text/javascript" th:inline="javascript">
    let basePath = [[${#httpServletRequest.getContextPath()}]];

    $(function () {
        let editor = editormd("editor", {
            width: "100%",
            height: 640,
            // width: "100%",
            // height: "100%",
            // markdown: "xxxx",     // dynamic set Markdown text
            path: basePath + "lib/editormd/lib/"  // Autoload modules mode, codemirror, marked... dependents libs path
        });
        let userInfo = [[${blog.userId}]];
        let a = {
            'id': userInfo.id,
            'nickname': userInfo.nickname
        }
        console.log(userInfo.id)
        // console.log(JSON.stringify(userInfo).replace(/\"/g,"'"));
        $('#userId').val(a);
    });
    layui.use(['element', 'layer', 'form', 'convert', 'miniTab', 'upload'], function () {
        let layer = layui.layer;
        let form = layui.form;
        let convert = layui.convert;
        let miniTab = layui.miniTab;
        let upload = layui.upload;
        let element = layui.element;

        form.verify({
            firstPic: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (value == '') {
                    return '请上传首图';
                }
            }
        })
        //发布文章
        form.on('submit(postArticle)', function (data) {
            data.field;
            console.log(data.field);
            let postLayer;
            postLayer = layui.layer.msg('正在发布', {icon: 16, shade: 0.01, time: 0});
            $.ajax({
                url: basePath + '/blog/postArticleUpdate',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    layui.layer.close(postLayer);
                    if (result.code == 1) {
                        //成功
                        layui.layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            miniTab.deleteCurrentByIframe();
                            miniTab.openNewTabByIframe({
                                href: basePath + "/admin/blogs.html",
                                title: "文章管理",
                            });
                        });
                    } else {
                        //失败
                        layui.layer.msg(result.msg, {icon: 2});
                    }
                },
                error: function (arg) {
                    layui.layer.close(postLayer);
                    layui.layer.msg(arg);
                }
            })
            return false;
        });
        //保存文章
        form.on('submit(saveArticle)', function (data) {
            let postLayer;
            postLayer = layui.layer.msg('正在保存', {icon: 16, shade: 0.01, time: 0});
            $.ajax({
                url: basePath + '/blog/saveArticleUpdate',
                data: JSON.stringify(data.field),
                contentType: 'application/json',
                dataType: 'json',
                type: 'post',
                success: function (result) {
                    layui.layer.close(postLayer);
                    if (result.code == 1) {
                        //成功
                        layui.layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            miniTab.deleteCurrentByIframe();
                            miniTab.openNewTabByIframe({
                                href: basePath + "/admin/blogs.html",
                                title: "文章管理",
                            });
                        });
                    } else {
                        //失败
                        layui.layer.msg(result.msg, {icon: 2});
                    }
                },
                error: function (arg) {
                    layui.layer.close(postLayer);
                    layui.layer.msg(arg);
                }
            })
            return false;
        });
        //普通图片上传
        let uploadInst = upload.render({
            elem: '#uploadFirstPic'
            , url: '/file/upload/'
            , accept: 'images'
            , size: 5120
            , before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result);
                });
            }
            , done: function (res) {
                // res = JSON.parse(res);
                console.log(res)
                layer.msg(res.msg);
                if (res.code) {
                    let fileUpload = $("#firstPic");
                    let path = res.data[0];
                    if (path.substr(0, 2) != "D:") {
                        path = '/linux' + path;
                    }
                    $("#uploadTips").attr("hidden", "true");
                    fileUpload.attr("src", '/file/getImg/' + path);
                    $("#firstPicInput").attr("value", res.data[0]);
                }
            }
            , error: function (res) {
                //演示失败状态，并实现重传
                layer.msg(res);
            }
            , progress: function (n) {
                let percent = n + '%' //获取进度百分比
                $("#uploadImgProg").attr("lay-percent", percent);
                element.render(); //进度条
            }
        });

    });

</script>
</body>
</html>